/**
 * setState 进阶
 */

import React from 'react'
import { flushSync } from 'react-dom'

class DemoThree extends React.Component {
  state = {
    x: 10,
    y: 5,
    z: 0
  }

  handleClick = () => {
    let { x, y, z } = this.state
    this.setState({ x: x + 1 })
    console.log(this.state)
    flushSync(() => {
      console.log(this.state)
      this.setState({ y: y + 1 })
    })

    console.log(this.state)
    this.setState({ z: z + 1 })
  }

  // shouldComponentUpdate() {
  //   // return false
  // }

  componentDidUpdate() {
    console.log('DidUpdate!')
  }

  render() {
    console.log('RENDER')
    let { x, y, z } = this.state
    return <div>
      x: {x} - y: {y} - z: {z}
      <br />
      <button onClick={this.handleClick}>更新状态</button>
    </div>
  }

}

export default DemoThree